<template>
  <div>
<h4>{{title}}</h4>
<h4>{{name}}</h4>
<p>请输入你要买的斤数 <input type="text" v-model="jin"></p>
<button @click="fn">结账买单</button>
<p>结账单&nbsp;&nbsp; 总价:￥{{price}}元&nbsp;&nbsp;&nbsp; 折后价:￥{{zhe}}元 &nbsp; &nbsp;&nbsp;省了:￥{{save}}元</p>

  </div>
</template>

<script>
export default {
data(){
  return{
    title:'欢迎光临_vue开发的收银系统_水果店',
    name:'苹果10￥/斤,折扣<8折>',
   jin:'',
    price:'',
    zhe:'',
    save:''
  }
},
methods:{
  fn(){
this.price=10*this.jin,
this.zhe=this.price-2*this.jin,
this.save=this.price-this.zhe
this.jin=''
  }
}
}
</script>

<style>

</style>